<template>
    <div class="transfer-goods page">
        <div class="con">
            <div class="header">
                <div class="left">
                    <span class="name">给{{tem.user.name}}转货</span>
                    <span class="right iconfont iconarrow_right"></span>
                </div>
                <div class="right">
                    <span @click="changeEdit" class="edit" :class="{selected:edit}">编辑</span>
                    <span class="line">|</span>
                    <span @click="reset" class="reset">重置</span>
                </div>
            </div>


            <div class="stores">
                <div class="item border-bottom-1px" v-for="(store,index) in storeList"
                     :key="index">
                    <img :src="imgH+store.goods.img" alt="" class="img">
                    <div class="info" @click="selectItem(index)">
                        <span class="name">{{store.goods.name}}</span>
                        <span class="quantity">库存:{{store.store.quantity}}</span>
                    </div>

                    <div v-if="!edit&&store.selected" class="iconfont iconh-itemselected"></div>

                    <div class="del" v-if="edit" @click="remove(store)" >
                        删除
                    </div>
                    <num-input v-if="edit" v-model="store.sq" class="num-input"></num-input>
                </div>

            </div>

            <txt-input type="switch" v-model="showAddress" :disabled="self" style="margin-top: 0.133rem;height: 1rem"
                       label="直接发货"></txt-input>

            <addr @click.native="toAddress" style="margin-top: 0.133rem" v-if="showAddress&&this.tem.address"
                  :address="this.tem.address"></addr>

            <span class="remark" @click="showAlert">点击添加备注</span>


            <div class="btn" @click="transfer">
                点击提交
            </div>

        </div>
    </div>
</template>

<script>
    import txtInput from '@/components/base/txt-input'
    import numInput from '@/components/base/num-input'
    import {list} from "@/api/store";
    import addr from '@/components/addr'
    import {getAddress} from "@/api/order";
    import {showInfo} from "@/toast";
    import {transfer} from "@/api/store";
    import {info} from "../../api/user";
    import * as Dialog from '@/dialog'
    export default {
        name: "goods",
        activated() {

            //显示地址
            if (this.$route.query.addressId) {
                this.showAddress = true
                getAddress(this.$route.query.addressId).then(res => {
                    this.tem.address = res.data
                })
            } else {//初始化数据
                if (this.$route.query.self) {
                    this.self = this.$route.query.self
                    info().then(res => {
                        this.tem.user.name = res.data.name
                        this.tem.user.code = res.data.code
                        this.tem.user.id = res.data.id
                        this.showAddress = true
                    })
                } else {
                    this.tem.user.name = this.$route.query.name
                    this.tem.user.code = this.$route.query.code
                    this.tem.user.id = this.$route.query.userId
                    this.tem.remark = ''
                }
                this.edit = false
                list().then(res => {
                    this.stores = res.data
                })
            }
        },
        computed: {
            imgH() {
                return process.env.VUE_APP_IMG_DOMAIN
            },
            storeList() {
                if (this.edit) {//只返回选中的
                    return this.storeSelectedList
                } else {
                    return this.stores
                }
            },
            storeSelectedList() {
                return this.stores.filter(store => store.selected)
            }
        },
        components: {
            numInput, txtInput, addr
        },
        watch: {
            showAddress() {
                if (this.showAddress && !this.tem.address) {
                    this.toAddress()
                }
            }
        },
        methods: {
            remove(store){
                store.selected = false
            },
            toAddress() {
                this.$router.push('/address')
            },
            showAlert() {
                this.dialog = this.$createDialog({
                    type: 'prompt',
                    title: '备注',
                    prompt: {
                        value: '',
                        placeholder: '请输入'
                    },
                    onConfirm: (e, promptValue) => {
                        this.tem.remark = promptValue
                        // this.$createToast({
                        //     type: 'warn',
                        //     time: 1000,
                        //     txt: `Prompt value: ${promptValue || ''}`
                        // }).show()
                    }
                }).show()
            },
            transfer() {
                if (this.storeSelectedList.length <= 0) {
                    showInfo("请点击上面的产品并编辑数量", "warn")
                    return;
                }
                if (!this.edit) {
                    this.edit = true
                    return
                }
                this.tem.mallOrder.items = []
                this.storeSelectedList.forEach(store => {
                    if (store.sq && store.sq > 0) {
                        let item = {
                            goodsId: store.goods.id,
                            quantity: store.sq
                        }
                        this.tem.mallOrder.items.push(item)
                    }
                })
                if( this.tem.mallOrder.items.length==0){
                    showInfo("请点击上面的产品并编辑数量!", "warn")
                    return;
                }
                this.tem.mallOrder.orderType = this.showAddress ? 0 : 1
                //封装地址
                if (this.tem.mallOrder.orderType == 0) {
                    if(!this.tem.address){//不存在地址 选择地址
                        showInfo("请选择或者新增地址!", "warn")
                        this.toAddress();
                        return;
                    }
                    this.tem.mallOrder.province = this.tem.address.province
                    this.tem.mallOrder.city = this.tem.address.city
                    this.tem.mallOrder.county = this.tem.address.county
                    this.tem.mallOrder.detail = this.tem.address.detail
                    this.tem.mallOrder.mobile = this.tem.address.mobile
                    this.tem.mallOrder.userName = this.tem.address.name
                    this.tem.mallOrder.remark = this.tem.remark
                }
                let con = "转货"
                if(this.tem.mallOrder.orderType == 0){
                    con = "发货"
                }

                transfer(this.tem).then(res => {
                    this.$createDialog({
                        type: 'alert',
                        icon: 'cubeic-alert',
                        title: '操作成功',
                        onConfirm: () => {
                            this.$router.push({
                                path: '/my'
                            })
                        }
                    }).show()
                })
                //确定操作
                // Dialog.showConfirm(`确定${con}吗?`).then(res=>{
                //     if(res){
                //         transfer(this.tem).then(res => {
                //             this.$createDialog({
                //                 type: 'alert',
                //                 icon: 'cubeic-alert',
                //                 title: '操作成功',
                //                 onConfirm: () => {
                //                     this.$router.push({
                //                         path: '/my'
                //                     })
                //                 }
                //             }).show()
                //         })
                //     }
                // })


            },
            changeEdit() {
                if (this.storeSelectedList.length > 0) {
                    this.edit = !this.edit
                }
            },
            reset() {
                this.edit = false
                this.stores.forEach(store => {
                    store.selected = false
                })
            },
            selectItem(index) {
                if (this.edit) {
                    return;
                }
                if (this.stores[index].selected) {
                    // this.stores[index].selected = !this.stores[index].selected
                    this.$set(this.stores[index], 'selected', !this.stores[index].selected)
                } else {
                    this.$set(this.stores[index], 'selected', true)
                }
                // console.log(this.stores[index].selected)
            }
        },
        data() {
            return {
                self: false,
                tem: {
                    user: {},
                    mallOrder: {
                        items: []
                    },
                    remark: null,
                    address: null
                },
                edit: false,
                showAddress: null,
                stores: []
            }
        }
    }
</script>

<style scoped lang="stylus">
    .transfer-goods
        background url("~@/assets/hbg.png") no-repeat $page-bg
        background-size 100% auto
        z-index 2



        .con
            background-color $page-bg
            overflow hidden
            padding 10px 10px 0

            .header
                border-radius 5px
                background-color white
                display flex
                justify-content space-between
                padding 0 15px
                height 44px
                align-items center

                .left
                    height 100%
                    display flex
                    align-items center

                    .name
                        font-size: 14px;
                        font-family: PingFang SC;
                        font-weight: 400;
                        color: rgba(111, 111, 111, 1);

                    .right
                        color #A1A1A1
                        margin-left 5px
                        font-size 10px

                .right
                    height 100%
                    display flex
                    align-items center
                    font-size 14px
                    color #A1A1A1

                    .line
                        font-size 14px
                        margin 0 10px
                        color #A1A1A1

                    .edit
                        &.selected
                            color #F7895E

                    .reset
                        &.selected
                            color #F7895E

            .stores
                background-color white
                margin-top 10px
                border-radius 5px
                overflow hidden

                .item
                    position relative
                    border-bottom-color #DCDCDC
                    height 80px
                    display flex
                    align-items center

                    .iconfont
                        font-size 18px
                        color #F7895E
                        position absolute
                        right 30px
                        top 30px

                    .img
                        width 50px
                        height 50px
                        border-radius 5px
                        margin 0 15px
                        flex 0 0 50px

                    .info
                        flex 1
                        display flex
                        flex-direction column
                        height 50px

                        .name
                            text-wrap none
                            text-overflow ellipsis
                            font-size: 14px;
                            font-family: PingFang SC;
                            font-weight: 300;
                            color: rgba(78, 61, 7, 1);
                            margin 5px 0px 10px

                        .quantity
                            font-size: 12px;
                            font-family: PingFang SC;
                            font-weight: 300;
                            color: rgba(161, 161, 161, 1);

                    .del
                        height 100%
                        width 50px
                        background-color #F7895E
                        font-size 12px
                        color #FFFFFF
                        display flex
                        align-items center
                        justify-content center

                    .num-input
                        position absolute
                        right 90px
                        bottom 11px

            .remark
                font-size 12px
                color red

            .btn
                margin-bottom 20px
                height 40px
                text-align center
                background-color #F7895E
                color white
                line-height 40px
                font-size 14px
                margin-top 20px
                border-radius 20px


</style>
